<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{padding:10px;margin:10px;border:solid 1px black;}

        .red{background:red}
        .green{border: solid 10px green;}
    </style>
</head>
<body>
    <div class="app">
        <h1>这是 - {{title}}</h1>
        <p>父组件的数据为：{{msg}}</p>

        <Child1></Child1>
    </div>
</body>
<template id="child1Temp">
    <div>
        <h3>这是 - {{title}}</h3>
        <p>子组件的数据为：{{msg}}</p>
        <grand-son></grand-son>
        <p>获取到一个祖先注入的依赖：{{a}}</p>
        <p>获取到一个祖先注入的依赖：{{b}}</p>
    </div>
</template>
<template id="grandSon">
    <div>
        <h3>这是 - {{title}}</h3>
        <p>孙子组件的数据为：{{msg}}</p>
        <p>获取到一个祖先注入的依赖：{{a}}</p>
        <p>获取到一个祖先注入的依赖：{{b}}</p>
        <p>获取到一个祖先注入的依赖：{{c}}</p>
        <p>获取到一个祖先注入的依赖：{{d}}</p>
        <p>获取到一个祖先注入的依赖：{{e}}</p>
    </div>
</template>
<script src="../vue.global.js"></script>
<script>
    const {createApp, ref, reactive, provide, inject} = Vue;
    const app = createApp({
        setup(){
            const title = ref("根组件");
            const msg = ref("根组件的数据");

            provide("abc", "hello world");
            provide("asd", msg);

            return {title, msg};
        },
        components:{
            Child1: {
                setup(){
                    const title = ref("子组件1");
                    const msg = ref("子组件1的数据");
                    return {title, msg};
                },
                template: "#child1Temp",
                components:{
                    grandSon:{
                        setup(){
                            const title = ref("孙子组件1");
                            const msg = ref("孙子组件1的数据");

                            const a = inject("abc");
                            const b = inject("asd");
                            const c = inject("qwe", ()=>"hello", true);
                            const d = inject("zxc", ()=>"world", false);
                            const e = inject("aaa", "这是默认值");

                            return {title, msg, a, b, c, d, e};
                        },
                        template: "#grandSon"
                    }
                }
            }
        }
    })

    app.mount(".app");

</script>
</html>